<template>
  <span
    class="upload-file-info"
    :style="{ 'min-width': `${minWidth}px`, 'max-width': `${maxWidth}px` }"
  >
    <a-icon-font v-show="fileIcon" type="iconxuanzewenjian-copy" />
    <a-tooltip placement="top">
      <template slot="title">
        <span>{{ fileName }}</span>
      </template>
      <span
        class="upload-file-text"
        :style="{
          width: `calc(100% - ${deleteIcon ? '30px' : '15px'})`,
        }"
        >{{ fileName }}</span
      >
    </a-tooltip>
    <img
      v-if="deleteIcon"
      alt=""
      src="@/assets/form/delete-file.svg"
      @click="deleteFile()"
    />
  </span>
</template>

<script lang="ts">
/**
 * 已上传文件
 * @author Jinhui Hou
 */
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class UploadedFileName extends Vue {
  @Prop({ type: String }) fileName!: string // name
  @Prop({ type: Boolean, default: true }) deleteIcon!: boolean // 删除图标
  @Prop({ type: Boolean, default: true }) fileIcon!: boolean // 文件图标
  @Prop({ type: Number, default: 100 }) minWidth!: number // 最小宽度
  @Prop({ type: Number, default: 150 }) maxWidth!: number // 最大宽度

  public deleteFile() {
    this.$emit('delete')
  }
}
</script>
<style lang="less" scoped>
.upload-file-info {
  display: inline-block;
  padding: 0 12px;
  top: 27px;

  .upload-file-text {
    color: #6973ff;
    display: inline-block;
    overflow: hidden;
    padding: 0 8px;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
  }

  img {
    cursor: pointer;
  }
}
</style>
